<template>
  <div class="mo-say-article">
    <div class="article-top">
      <img v-if="this.value.user" :src="this.value.user.avatar" alt="用户" />
      <div class="article-top-mes">
        <div class="mes-username" v-if="this.value.user">{{this.value.user.nickname}}</div>
        <div class="mes-time">
          <!-- <Time :time="this.$moment(this.value.createdAt).valueOf()" :interval='10'></Time> -->
          {{this.$moment(this.value.createdAt).fromNow()}}
          #{{this.reviewrank+1}}
        </div>
      </div>
    </div>
    <div class="article-main" v-if="!!this.value.review.split('>')[1]">
      <a href="#">
        {{
        this.value.review.split('>')[0]
        }}
      </a>
      {{
      this.value.review.split('>')[1]
      }}
    </div>
    <div class="article-main" v-if="!!this.value.review.split('>')[1] ===false">
      {{
      this.value.review.split('>')[0]
      }}
    </div>
    <div class="article-ctl">
      <span>
        <Icon type="md-heart-outline" size="14" />0赞
      </span>
      <span @click="answer">
        <Icon type="md-chatboxes" size="14" />
        <a href="#pl-input">回复</a>
      </span>
      <span v-if="this.userid != this.value.ownerId">
        <Icon type="md-sad" size="14" />举报
      </span>
      <span v-if="this.userid == this.value.ownerId" @click="destroyReview">
        <Icon type="ios-trash" size="14" />删除
      </span>
    </div>
  </div>
</template>
<script>
import { Time } from "view-design";
export default {
  name: "moSayArticle",
  data() {
    return {
      review: "",
      owner: "别动我黑菜",
      ownerid: "1"
    };
  },
  props: ["value", "reviewrank", "userid"],
  computed: {
    getTime: function() {
      return this.$moment(this.value.createdAt).valueOf();
    }
  },
  mounted() {
    // console.log(this.userid + "---" + this.value.ownerId);
  },
  methods: {
    answer: function() {
      this.$emit("getReviewTo", {
        owner: "@" + this.value.user.nickname + ">",
        reviewTo: this.value.ownerId
      });
    },
    //删除评论
    destroyReview: function() {
      this.$axios
        .get(this.$store.getters.url + "/destroyReview?id=" + this.value.id)
        .then(res => {
          if (res.data.code == 200) {
            this.$Message.success("删除成功！");
            this.$emit("reload");
          }
        });
    }
  },
  components: {
    Time
  }
};
</script>
<style lang="scss" scoped>
.mo-say-article {
  width: 100%;
  min-height: 80px;
  margin-top: 5px;
  animation: boxAnime 0.4s ease-in-out;
  transition: all 0.4s;
  .article-top {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      margin-left: 5px;
      border-radius: 25px;
    }
    .article-top-mes {
      width: 100%;
      height: 50px;
      .mes-username {
        width: 100%;
        height: auto;
        text-align: left;
        padding-left: 5px;
        padding-top: 5px;
        font-size: 14px;
        font-weight: bold;
      }
      .mes-time {
        width: 100%;
        height: auto;
        text-align: left;
        padding-left: 5px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  .article-main {
    width: 100%;
    height: auto;
    font-size: 14px;
    text-align: left;
    padding-left: 5px;
  }
  .article-ctl {
    width: 100%;
    height: 20px;
    display: flex;
    padding-left: 5px;
    margin-top: 5px;
    span {
      color: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      margin-right: 10px;
      letter-spacing: 1px;
      a {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
      }
      &:hover {
        color: rgba(0, 0, 0, 1);
      }
    }
  }
}
@keyframes boxAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>